<template>
  <div>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="类型">
        <nice-select
          v-model="search.examType"
          placeholder="请选择类型"
          clearable
          :options="selectEnums.nice_exam.exam_type"
        ></nice-select>
      </el-form-item>
      <el-form-item label="年级">
        <nice-select
          v-model="search.grade"
          placeholder="请选择年级"
          clearable
          :options="selectEnums.nice_course.grade"
        ></nice-select>
      </el-form-item>
      <el-form-item label="科目">
        <nice-select
          v-model="search.subject"
          placeholder="请选择科目"
          clearable
          :options="selectEnums.nice_course.subject"
        ></nice-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-input
          v-model="search.courseName"
          placeholder="请输入课程名称"
          clearable
        ></el-input>
        <!-- <el-select v-model="search.courseName" filterable remote reserve-keyword placeholder="请输入课程名称" :remote-method="remoteMethod" :loading="loading" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select> -->
      </el-form-item>
      <el-form-item label="状态">
        <nice-select
          v-model="search.status"
          placeholder="请选择状态"
          clearable
          :options="statusList"
        ></nice-select>
      </el-form-item>
      <el-form-item label="考试名称">
        <el-input
          v-model="search.examName"
          placeholder="请输入考试名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList" size="small"
          >搜索</el-button
        >
      </el-form-item>
      <div class="right">
        <el-form-item>
          <el-button type="primary" @click="add()" size="small">新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="list" border @row-click="toView">
      <el-table-column label="考试名称">
        <template slot-scope="scope">
          <p>{{ scope.row.examName }}</p>
          <el-tag
            :type="scope.row.examType == 840 ? 'warning' : 'danger'"
            effect="dark"
            v-if=""
            >{{
              scope.row.examType | G(selectEnums.nice_exam.exam_type)
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="course_title" label="考试时间" width="200">
        <template slot-scope="scope">
          <h4>{{ scope.row.examTime }}</h4>
          <h4>{{ scope.row.endTime }}</h4>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="关联试卷">
        <template slot-scope="scope">
          <p v-for="(item, index) in scope.row.paperList" :key="index">
            {{ item.paperName }}<span v-if="item.isDefault">(默认)</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="关联课程">
        <template slot-scope="scope">
          <p v-for="(item, index) in scope.row.relateCourses" :key="index">
            {{ item.courseName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="升班(入学)课程">
        <template slot-scope="scope">
          <p v-for="(item, index) in scope.row.upCourses" :key="index">
            {{ item.courseName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="要求">
        <template slot-scope="scope">
          <p v-for="(item, index) in scope.row.upCourses" :key="index">
            {{ item.gtScore }}-{{ item.leScore }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <div @click.stop>
            <el-switch
              v-model="scope.row.status"
              @change="switchChange($event, scope)"
            ></el-switch>
            <el-button size="small" type="text" @click.stop="edit(scope.row)"
              >编辑</el-button
            >
          </div>
          <el-button
            size="small"
            type="text"
            @click.stop="relateExam(scope.row)"
            >关联试卷</el-button
          >
          <!-- 入学考不能关联课程,只有考试关闭的时候才能做一系列操作，新增编辑考试课程都是可以多选的，模糊搜索搜课程-->
          <el-button
            size="small"
            type="text"
            @click.stop="relateGood(scope.row)"
            >关联课程</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <add-update-exam
      v-if="isAddUpdate"
      ref="addUpdateExam"
      @refreshData="getDataList()"
    ></add-update-exam>
    <relate-exam-course
      v-if="isRelateDialog"
      ref="relateExamGood"
      :relateType="relateType"
      @refreshData="getDataList()"
    ></relate-exam-course>
  </div>
</template>
<script>
import { myEnumsMixins } from '@/utils/mixins'
import { getExamList } from '@/api/exam.js'
import AddUpdateExam from './add-update-exam'
import RelateExamCourse from './relate-exam-course'
import { getAllCourse } from '@/api/user.js'
import _ from 'underscore'
export default {
  data () {
    return {
      search: {
        examType: '',
        grade: '',
        subject: '',
        courseName: '',
        examName: '',
        status: ''
      },
      total: 0,
      loading: false,
      isAddUpdate: false,
      isRelateDialog: false,
      relateType: '',
      mode: '',
      options: [],
      statusList: [
        { label: '未开启', value: 0 },
        { label: '已开启', value: 1 }
      ],
      list: []
    }
  },
  mixins: [myEnumsMixins],
  components: { AddUpdateExam, RelateExamCourse },
  activated () {
    this.getDataList()
  },
  methods: {
    async getDataList () {
      let res = await getExamList({
        examType: this.search.examType,
        grade: this.search.grade,
        subject: this.search.subject,
        courseName: this.search.courseName,
        examName: this.search.examName,
        status: this.search.status
      })
      if (res[0]) {
        return
      }
      if (res[1].code == 0) {
        this.list = res[1].data.examList
        if (this.list && this.list.length) {
          this.list.forEach(ele => {
            ele.relateCourses = ele.examCourseList.filter(course => {
              return course.type == 1
            })
            ele.upCourses = ele.examCourseList.filter(course => {
              return course.type == 2
            })
          })
        }
        console.log(33333333, this.list)
      }
    },
    async switchChange (e, sc) {
      console.log(333, e)
    },
    // async remoteMethod (query) {
    //   if (query !== '') {
    //     this.loading = true
    //     let res = await getAllCourse({'nice_course.name': query})
    //     if (res[0]) {
    //       return
    //     }
    //     let data = res[1]
    //     this.loading = false
    //     if (data && data.code === 0) {
    //       if (data.data.pageList.list && data.data.pageList.list.length) {
    //         this.options = data.data.pageList.list.map(item => {
    //           return {
    //             label: item.name,
    //             value: item.id
    //           }
    //         })
    //       } else {
    //         this.options = []
    //       }
    //     }
    //   }
    // },
    relateExam (row) {
      this.isRelateDialog = true
      this.relateType = 'exam'
      this.$nextTick(() => {
        this.$refs.relateExamGood.init(row.id)
      })
    },
    relateGood (row) {
      this.isRelateDialog = true
      this.relateType = 'course'
      this.$nextTick(() => {
        this.$refs.relateExamGood.init(row.id)
      })
    },
    edit (row) {
      this.mode = 'EDIT'
      this.isAddUpdate = true
      this.$nextTick(() => {
        this.$refs.addUpdateExam.init(row.id)
      })
    },
    toView (e) {
      this.$router.push({
        name: 'examDetail',
        params: { id: 2 }
      })
    },
    add () {
      this.mode = 'ADD'
      this.isAddUpdate = true
      this.$nextTick(() => {
        this.$refs.addUpdateExam.init()
      })
    }
  }
}
</script>
